---
title: Figma
description: HeroUI Figma Kit helps you design beautiful and consistent user interfaces using our component library in Figma.
---

# Figma Kit

HeroUI components recreated in Figma. It includes components, colors, and typography from the HeroUI design system.

<CarbonAd />

<Spacer y={4} />

<iframe
  className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg aspect-video"
  height="600"
  src="https://embed.figma.com/file/1267584376234254760/hf_embed?community_viewer=true&embed_host=heroui"
  title="HeroUI Figma Kit"
  width="800"
/>

<Spacer y={4} />

<FigmaButton />

## What is HeroUI Figma Kit?

HeroUI Figma Kit is a comprehensive design resource that contains the foundation of the HeroUI design system. It helps designers and developers create consistent and beautiful user interfaces using our component library.


<Blockquote color="warning">
  This file is still in development and will be continuously updated.
</Blockquote>

---

## FAQ

### How can I access the Figma Kit?

<div className="text-default-600 dark:text-default-500">
  You can access the HeroUI Figma Kit by clicking the "Open in Figma" button above. The kit is free and available to anyone with a Figma account.
</div>

### Is the Figma Kit kept up to date with the component library?

<div className="text-default-600 dark:text-default-500">
  Yes, we strive to keep the Figma Kit synchronized with our component library. However, as noted above, the kit is still in development and continuously being updated.
</div>

### Can I use the Figma Kit for my projects?

<div className="text-default-600 dark:text-default-500">
  Yes, you can use the HeroUI Figma Kit for both personal and commercial projects. We encourage you to use it as a starting point for your designs.
</div>

### Are the components in the Figma Kit responsive?

<div className="text-default-600 dark:text-default-500">
  The components in the Figma Kit are designed with responsiveness in mind, matching the behavior of our React components. You can find examples of different viewport sizes and component states.
</div>

